<template>
  <div class="myOrder">
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分start
        -->
    <!--<mt-header fixed title="订单">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分end
        -->
    <div class="order_nav" id="tab">
      <ul class="nav_h">
        <li class="active"> <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">全部</a></li>
        <li><a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">拼单中</a></li>
        <li><a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">待发货</a></li>
        <li><a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">已发货</a></li>
        <li><a href="javascript:;" @click="curId=4" :class="{'cur':curId===4}">退货/</a></li>
      </ul>
    </div>
    <div class="order_list" v-show="curId===0">
      <div class="order_box" v-for="(order,index) in list" :key=order.id>
        <div class="order_t">
          <div class="order_img">
            <router-link to="/shops" class="shops">
            <img :src="order.tx">
            </router-link>
          </div>
          <div class="order_c">

            {{order.idSalesman}}

          </div>
          <div class="order_day">
            还差{{order.numPerson}}人剩余：
            <Countdown :endTime = order.timeEnd  endText="已经结束了"></Countdown>
          </div>
        </div>
        <div class="order_content" v-for="good in goodlist":key=good.id>
          <div class="oc_img">
            <img :src="good.mallImg">
          </div>
          <div class="oc_content">
            <div class="oc_title">
              {{good.mallName}}
            </div>
            <div class="oc_money">
              ${{good.mallNumber}}
            </div>
          </div>
        </div>
        <div class="order_foot">
          <div class="order_footer_c">
            <div class="order_more" @click="updateCount(index)">
              更多
            </div>
            <div class="order_again">
              <router-link to="/detail" class="agp">
              再拼一次
              </router-link>
            </div>
            <div class="order_invite">
              <router-link to="/fxpdDetails" class="yq">邀请拼单</router-link>
            </div>
            <div class="operation_order" :class="{'highlight':order.state}">
              <p class="cancel">取消订单</p>
              <p class="delete" @click="del(index)">删除订单</p>
            </div>
          </div>
        </div>
      </div>
   </div>
    <loading v-show="showLoading "></loading>
  </div>
</template>

<script>
  /* eslint-disable indent,no-tabs,key-spacing,no-trailing-spaces,space-before-function-paren,quotes,spaced-comment,semi,no-undef,space-infix-ops */
  import Vue from 'vue'
  import Mint from 'mint-ui'
  import 'mint-ui/lib/style.css'
  //import Countdown from "./Countdown.vue";
  Vue.use(Mint)
  export default {
    name: 'myOrder',
   // components: {
// eslint-disable-next-line no-undef
     // "Countdown" : Countdown
   // },
    data() {
      return {
        curId: 0,
        isShow: false,
        list: [],
        goodlist: [],
        //endTime:''
        showLoading: true, //显示加载动画
      }
    },
    computed: {},
    beforeCreate: function() { // 生命周期
       {
        const jsonValue = JSON.stringify({
          "c": "10010",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "startIndex": 0, // 开始位置
            "pageSize": 10, // 分页总数量
            "tokenId": token()
          }
        });
// eslint-disable-next-line space-infix-ops
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
           //console.log(res.data);
          //console.log(res.data.p.list);
         // eslint-disable-next-line semi
          this.hideLoading();
          this.list = res.data.p.list;
          this.goodlist = res.data.p.goods;
          console.log(this.list);
          console.log(this.goodlist)
        })
      }
    },
    methods: {
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      updateCount: function (index) {
        this.list[index].state = !this.list[index].state
      },
      del:function (index) {
// eslint-disable-next-line comma-spacing
        this.list.splice(index,1)
      }
    },
    destroyed () {
      this.$router.push({name: 'myHome'})
    }
  }
</script>
<style scoped>
  .mint-header {
    background: #1c1b20;
    width: 640px;
  }

  .highlight {
    opacity: 0;
  }

  .Team_btn {
    text-align: center;
  }

  .mint-cell-text {
    margin-left: 30px;
  }

  .mint-cell-label {
    margin-left: 53px;
  }

  .t_list {
    width: 640px;
    height: 131px;
    float: left;
  }

  .list_img {
    width: 112px;
    height: 131px;
    float: left;
    padding-top: 9px;
  }

  .list_img img {
    width: 112px;
    height: 112px;
    margin-left: 24px;
  }

  .list_c {
    width: 160px;
    height: 131px;
    float: left;
    margin-left: 40px;
    padding-top: 28px;
  }
  .yq{color: #fff}
  .agp{color:#fe3519 }
  .shops{color:#000 }

  .icon_img {
    width: 15px;
    height: 131px;
    float: right;
    line-height: 131px;
    margin-right: 30px;
  }

  .icon_img img {
    width: 12px;
    height: 22px;
  }

  .order_nav {
    width: 640px;
    height: 100px;
    background: #F4F4F4;
    margin-top: 70px;
    position: fixed;
    top: -8px;
    z-index: 999;
  }

  .nav_h {
    height: 80px;
    background: #FFFFFF;
    padding-left: 60px;
    line-height: 80px;
    margin-left: -80px;
  }

  .nav_h li {
    float: left;
    width: 80px;
    height: 80px;
    display: block;
    text-align: center;
    margin-left: 50px;
    font-size: 24px;
  }

  .nav_h li a {
    text-decoration: none;
    color: #3b3b43;
  }

  .cur {
    color: #fe3519 !important;
  }

  .order_list {
    margin-top: 160px;
  }

  .active {
    color: #fe3519;
  }

  .order_t {
    width: 640px;
    height: 80px;
  }

  .order_img {
    width: 48px;
    height: 80px;
    float: left;
    margin-left: 30px;
  }

  .order_img img {
    width: 48px;
    height: 48px;
    margin-top: 20px;
  }

  .order_c {
    font-size: 24px;
    width: 175px;
    height: 80px;
    float: left;
    margin-left: 10px;
    line-height: 80px;
    z-index: 1999999999;
  }

  .order_day {
 /*   width: 260px;*/
    height: 80px;
    float: right;
    color: #fe3519;
    margin-right: 30px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
  }

  .order_content {
    width: 640px;
    height: 240px;
    border-bottom: 1px solid #F4F4F4;
    border-top: 1px solid #F4F4F4;
  }

  .oc_img {
    width: 175px;
    height: 230px;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
  }

  .oc_img img {
    width: 175px;
    height: 175px;
  }

  .oc_content {
    width: 400px;
    height: 240px;
    float: left;
    margin-left: 20px;
  }

  .oc_title {
    width: 370px;
    height: 100px;
    margin-top: 30px;
    font-size: 24px;
    color: #3b3b43;
  }

  .oc_money {
    width: 370px;
    height: 50px;
    color: #FE3519;
    font-size: 24px;
    margin-top: 46px;
  }

  .order_foot {
    width: 640px;
    height: 110px;
    background: #F4F4F4;
  }

  .order_footer_c {
    width: 640px;
    height: 90px;
    background: #FFFFFF;
  }

  .order_more {
    width: 50px;
    height: 90px;
    line-height: 90px;
    font-size: 20px;
    float: left;
    display: block;
    margin-left: -60px;
  }

  .order_again {
    width: 180px;
    height: 64px;
    border: 1px solid #fe3519;
    float: left;
    color: #fe3519;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 30px;
    margin-top: 13px;
  }

  .order_invite {
    width: 180px;
    height: 64px;
    float: left;
    color: #FFFFFF;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 27px;
    margin-top: 13px;
    background: url(../assets/images/btn2@1x.png);
    background-size: cover;
  }

  .operation_order {
    width: 148px;
    height: 148px;
    background: url(../assets/images/bg@1x.png);
    position: relative;
    top: 75px;
    left: 88px;
    text-align: center;
    background-size: cover;
  }

  .operation_order p {
    width: 148px;
    height: 30px;
    color: #a1a1a1;
    font-size: 22px;
  }

  .cancel {
    position: relative;
    top: -60px;
    height: 30px;
  }

  .delete {
    position: relative;
    top: -10px;
    height: 30px;
  }
</style>
